<!--
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2023-09-23 18:00:26
 * @FilePath: \web-interview-questions\手写签名.html
 * @email: 492934056@qq.com
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="myCanvas"
      width="500"
      height="300"
      style="background-color: #eee"
    ></canvas>

    <script>
      const cvs = document.getElementById("myCanvas");
      var ctx = cvs.getContext("2d");
      ctx.fillStyle = "#FF0000";
      ctx.save();
      ctx.strokeStyle = "red";
      ctx.lineJoin = "miter";
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.moveTo(10, 10);
      ctx.lineTo(20, 10);
      ctx.lineTo(10, 20);
      ctx.lineTo(20, 20);
      ctx.stroke();

      ctx.strokeStyle = "black";

      let isDrawing = false;
      cvs.addEventListener("mousedown", (e) => {
        isDrawing = true;
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
      });
      cvs.addEventListener("mousemove", (e) => {
        if (isDrawing) {
          ctx.lineTo(e.clientX, e.clientY);
          ctx.stroke();
        }
      });
      document.addEventListener("mouseup", (e) => {
        isDrawing = false;
      });
    </script>
  </body>
</html>
